<template>
  <div data-vjs-player>
    <video
      ref="videoPlayer"
      id="my-video"
      class="video-js vjs-default-skin"
      :poster="currentDevice.img"
      controls
      x5-playsinline
      playsinline
      webkit-playsinline
      x5-video-player-type="h5"
      x5-video-orientation="landscape|portrait"
      preload="auto"
      style="width: 100%; height: 360px; background-color: #000000;"
    >
      <source :src="currentDevice.videoUrl" />
    </video>
  </div>
</template>

<script>
import { getBiCameraList,getBiCameraList_qy, getDbProductList, getBiCameraListV2, getDeviceStreamPlay,getDeviceStreamPlay_qy, getDeviceOnLineState } from '@/api/cctv'
import videojs from "video.js";
import 'video.js/dist/video-js.css'
import 'videojs-landscape-fullscreen'
import icon_1 from './img/icon_1.jpg'
import icon_2 from './img/icon_2.jpg'
export default {
  data() {
    return {
      showVideo: false,
      isPlay: false,
      currentDevice: {
        img: '',
        videoUrl: ''
      },
      cameraList: [],
      hlsVideo: null,
      videojs: null,
    }
  },
  async mounted() {
    await this.getDevStream(JSON.parse(localStorage.getItem('cctvDetail')))
    this.getVideo()
  },
  beforeDestroy() {
    console.log(this.videojs, 'video');
    if (this.videojs) {
      this.videojs.dispose()
    }
  },
  methods: {
    getVideo() {
      this.$nextTick(() => {
        this.videojs = videojs(
          "my-video",
          {
              bigPlayButton: true,
              textTrackDisplay: false,
              errorDisplay: false,
              controlBar: true
          },
          function onPlayerReady() {
            console.log('onPlayerReady', this);
          }
        );
        this.videojs.landscapeFullscreen({
          fullscreen: {
            enterOnRotate: true,
            exitOnRotate: true,
            alwaysInLandscapeMode: true,
            iOS: true
          }
        })
      })
    },
    async getCamList() {
    
      let result
      if(process.env.VUE_APP_PLANTFORM&&process.env.VUE_APP_PLANTFORM=="QYAQ"){
         result = await getBiCameraList_qy();
      }else{
         result = await getBiCameraList({});
      }
      this.cameraList = result
    },

    // 获取摄备状态
    async getDevState(item) {
      var params = {
        regionId: item.regionIndexCode,
        indexCodes: [item.indexCode],
        pageNo: 1,
        pageSize: 10
      }
      var res = await getDeviceOnLineState(params)
      if (res.list.length != 0) {
        const online = res.list[0].online == 1 ? '在线' : '离线'
      }
    },
    async getDevStream(equipment) {
      if (!equipment.name.includes('盒子')) {
        this.showVideo = true
      } else {
        this.showVideo = false
      }

      // 获取摄像机列表
      await this.getCamList()

      ///找到对应摄像机
      var temp = this.cameraList.find((item) => {
        return item.id == equipment.id
      })
      this.currentDevice.img=temp.productId=='3'?icon_2:icon_1
      //获取监控点
      let params = {
        name: temp.name,
        regionIndexCodes: [temp.regionIndexCode],
        pageNo: 1,
        pageSize: 10
      }
      // var v2regineList = await getBiCameraListV2(params)
      // //获取设备状态
      // if (!v2regineList.list[0]) {
      //   return
      // }
      // this.getDevState(v2regineList.list[0])
      // console.log("ssssssssss")
      // console.log(v2regineList)
      // console.log(temp)
      var streamParams = {
        // cameraIndexCode: v2regineList.list[0].indexCode,
        // cameraIndexCode:temp.list[0].indexCode,
        cameraIndexCode:temp.indexCode,
        streamType: 0,
        protocol: 'hls',
        transmode: 1,
        expand: 'streamform=ps'
      }
      console.log("streamParams",streamParams)
      var urlData 
      if(process.env.VUE_APP_PLANTFORM&&process.env.VUE_APP_PLANTFORM=="QYAQ"){
        urlData = await getDeviceStreamPlay_qy(streamParams)

      }else{
        urlData = await getDeviceStreamPlay(streamParams)
      }

      console.log("urlData",urlData)
      this.currentDevice.videoUrl = urlData.url
    }
  }
}
</script>

<style scoped>
.flex-row {
  display: flex;
  flex-direction: row;
}
.image {
  width: 100%;
  height: 360px;
  border-radius: 8px;
}
</style>
